<!-- 通用配置-->
<template>
  <div>
    <!-- 折叠公共配置 -->
    <el-collapse accordion>
      <!-- 标题设置 -->
      <template v-if="dicOption.titleList.includes(type)">
        <el-collapse-item title="标题设置">
          <el-form-item label="标题显示">
            <el-switch
              v-model="myConfig.titleShow"
              class="float_right"
            ></el-switch>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="myConfig.title"></el-input>
          </el-form-item>
          <el-form-item :label="$t('颜色')" class="form_item_margin">
            <span class="l_color_box r_margin_right8">
              <l-input-color
                v-model="myConfig.titleColor"
                :notInput="true"
              ></l-input-color>
            </span>
            <el-input
              v-model="myConfig.titleColor"
              class="r_96width r_margin_right8"
            >
            </el-input>
            <el-input
              v-model="myConfig.titleFontSize"
              class="r_56width"
              oninput="value=value.replace(/[^\d]/g,'')"
            >
              <span slot="suffix" style="line-height: 32px">px</span>
            </el-input>
          </el-form-item>
          <el-form-item label="位置">
            <span
              class="l_inline_block"
              @click="handleClickPostion('titlePostion', 'left')"
              ><span
                class="l_inline_block2"
                :style="{
                  borderColor: myConfig.titlePostion == 'left' ? '#FFFFFF' : '',
                }"
                ><span
                  class="inline_position"
                  :style="{
                    backgroundColor:
                      myConfig.titlePostion == 'left' ? '#FFFFFF' : '',
                  }"
                ></span></span
            ></span>
            <span
              class="l_inline_block"
              @click="handleClickPostion('titlePostion', 'center')"
              ><span
                class="l_inline_block2"
                :style="{
                  borderColor:
                    myConfig.titlePostion == 'center' ? '#FFFFFF' : '',
                }"
                ><span
                  class="inline_position"
                  style="left: 5px"
                  :style="{
                    backgroundColor:
                      myConfig.titlePostion == 'center' ? '#FFFFFF' : '',
                  }"
                ></span></span
            ></span>
            <span
              class="l_inline_block"
              @click="handleClickPostion('titlePostion', 'right')"
              style="margin-right: 0"
              ><span
                class="l_inline_block2"
                :style="{
                  borderColor:
                    myConfig.titlePostion == 'right' ? '#FFFFFF' : '',
                }"
                ><span
                  class="inline_position"
                  style="right: 2px"
                  :style="{
                    backgroundColor:
                      myConfig.titlePostion == 'right' ? '#FFFFFF' : '',
                  }"
                ></span></span
            ></span>
          </el-form-item>
          <el-form-item label="副标题">
            <el-input v-model="myConfig.subtext"></el-input>
          </el-form-item>
          <el-form-item :label="$t('字体')" class="form_item_margin">
            <span class="l_color_box r_margin_right8">
              <l-input-color
                v-model="myConfig.subTitleColor"
                :notInput="true"
              ></l-input-color>
            </span>
            <el-input
              v-model="myConfig.subTitleColor"
              class="r_96width r_margin_right8"
            >
            </el-input>
            <el-input
              v-model="myConfig.subTitleFontSize"
              class="r_56width"
              oninput="value=value.replace(/[^\d]/g,'')"
            >
              <span slot="suffix" style="line-height: 32px">px</span>
            </el-input>
          </el-form-item>
        </el-collapse-item>
      </template>
      <!-- 轴设置 -->
      <template v-if="dicOption.barList.includes(type)">
        <el-collapse-item title="X轴设置">
          <el-form-item label="显示">
            <el-switch v-model="myConfig.xAxisShow" class="float_right">
            </el-switch>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="myConfig.xAxisName"> </el-input>
          </el-form-item>
          <el-form-item :label="$t('颜色')" class="form_item_margin">
            <span class="l_color_box r_margin_right8">
              <l-input-color
                v-model="myConfig.xNameColor"
                :notInput="true"
              ></l-input-color>
            </span>
            <el-input
              v-model="myConfig.xNameColor"
              class="r_96width r_margin_right8"
            >
            </el-input>
            <el-input
              v-model="myConfig.xNameFontSize"
              class="r_56width"
              oninput="value=value.replace(/[^\d]/g,'')"
            >
              <span slot="suffix" style="line-height: 32px">px</span>
            </el-input>
          </el-form-item>
          <el-form-item label="名称粗细">
            <l-select
              v-model="myConfig.xNameFontWeight"
              :options="dicOption.fontWeightOptions"
              :clearable="false"
            ></l-select>
          </el-form-item>
          <el-form-item label="名称位置">
            <l-select
              v-model="myConfig.xNameNameLocation"
              :options="dicOption.nameLocationOptions"
              :clearable="false"
            ></l-select>
          </el-form-item>
          <el-form-item label="类型">
            <l-select
              v-model="myConfig.xAxisType"
              :options="dicOption.axisTypeOptions"
              :clearable="false"
            ></l-select>
          </el-form-item>
          <el-form-item :label="$t('格式')">
            <el-input class="l-input-icon" v-model="myConfig.xAxisFormatter">
              <template slot="append">
                <el-popover
                  placement="top-start"
                  :title="$t('参数说明')"
                  width="400"
                  trigger="hover"
                >
                  <p>
                    <span style="color: #ff0033">{value}</span>：{{
                      $t("值名，比方")
                    }}<span style="color: #ff0033">{value} kg</span>
                  </p>
                  <p>
                    {{ $t("对于时间轴,支持多种形式") }}：<a
                      href="https://echarts.apache.org/zh/option.html#xAxis.axisLabel.formatter"
                      >{{ $t("查看官网") }}</a
                    >
                  </p>

                  <el-button
                    slot="reference"
                    icon="learun-icon-circle-question"
                  />
                </el-popover>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('文本样式')" class="form_item_margin">
            <span class="l_color_box r_margin_right8">
              <l-input-color
                v-model="myConfig.xNameLabelColor"
                :notInput="true"
              ></l-input-color>
            </span>
            <el-input
              v-model="myConfig.xNameLabelColor"
              class="r_96width r_margin_right8"
            >
            </el-input>
            <el-input
              v-model="myConfig.xNameLabelFontSize"
              class="r_56width"
              oninput="value=value.replace(/[^\d]/g,'')"
            >
              <span slot="suffix" style="line-height: 32px">px</span>
            </el-input>
          </el-form-item>
          <el-form-item label="线条显示">
            <el-switch v-model="myConfig.xAxisLineShow" class="float_right">
            </el-switch>
          </el-form-item>
          <el-form-item :label="$t('线条颜色')" class="form_item_margin">
            <l-input-color v-model="myConfig.xNameLineColor"></l-input-color>
          </el-form-item>
          <el-form-item label="网格线">
            <el-switch
              v-model="myConfig.xAxisSplitLineShow"
              class="float_right"
            ></el-switch>
          </el-form-item>
          <el-form-item label="分割间隔">
            <el-input-number
              v-model="myConfig.xAxisinterval"
              :min="0"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="文字角度">
            <el-switch v-model="myConfig.xAxisRotate" class="float_right">
            </el-switch>
          </el-form-item>
          <el-form-item label="轴反转">
            <el-switch v-model="myConfig.xAxisInverse" class="float_right">
            </el-switch>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="Y轴设置">
          <el-form-item label="显示">
            <el-switch v-model="myConfig.yAxisShow" class="float_right">
            </el-switch>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="myConfig.yAxisName"> </el-input>
          </el-form-item>
          <el-form-item :label="$t('颜色')" class="form_item_margin">
            <span class="l_color_box r_margin_right8">
              <l-input-color
                v-model="myConfig.yNameColor"
                :notInput="true"
              ></l-input-color>
            </span>
            <el-input
              v-model="myConfig.yNameColor"
              class="r_96width r_margin_right8"
            >
            </el-input>
            <el-input
              v-model="myConfig.yNameFontSize"
              class="r_56width"
              oninput="value=value.replace(/[^\d]/g,'')"
            >
              <span slot="suffix" style="line-height: 32px">px</span>
            </el-input>
          </el-form-item>
          <el-form-item label="名称粗细">
            <l-select
              v-model="myConfig.yNameFontWeight"
              :options="dicOption.fontWeightOptions"
              :clearable="false"
            ></l-select>
          </el-form-item>
          <el-form-item label="名称位置">
            <l-select
              v-model="myConfig.yNameNameLocation"
              :options="dicOption.nameLocationOptions"
              :clearable="false"
            ></l-select>
          </el-form-item>
          <el-form-item label="类型">
            <l-select
              v-model="myConfig.yAxisType"
              :options="dicOption.axisTypeOptions"
              :clearable="false"
            ></l-select>
          </el-form-item>
          <el-form-item :label="$t('格式')">
            <el-input class="l-input-icon" v-model="myConfig.yAxisFormatter">
              <template slot="append">
                <el-popover
                  placement="top-start"
                  :title="$t('参数说明')"
                  width="400"
                  trigger="hover"
                >
                  <p>
                    <span style="color: #ff0033">{value}</span>：{{
                      $t("值名，比方")
                    }}<span style="color: #ff0033">{value} kg</span>
                  </p>
                  <p>
                    {{ $t("对于时间轴,支持多种形式") }}：<a
                      href="https://echarts.apache.org/zh/option.html#yAxis.axisLabel.formatter"
                      >{{ $t("查看官网") }}</a
                    >
                  </p>

                  <el-button
                    slot="reference"
                    icon="learun-icon-circle-question"
                  />
                </el-popover>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('文本样式')" class="form_item_margin">
            <span class="l_color_box r_margin_right8">
              <l-input-color
                v-model="myConfig.yNameLabelColor"
                :notInput="true"
              ></l-input-color>
            </span>
            <el-input
              v-model="myConfig.yNameLabelColor"
              class="r_96width r_margin_right8"
            >
            </el-input>
            <el-input
              v-model="myConfig.yNameLabelFontSize"
              class="r_56width"
              oninput="value=value.replace(/[^\d]/g,'')"
            >
              <span slot="suffix" style="line-height: 32px">px</span>
            </el-input>
          </el-form-item>
          <el-form-item label="线条显示">
            <el-switch v-model="myConfig.yAxisLineShow" class="float_right">
            </el-switch>
          </el-form-item>
          <el-form-item :label="$t('线条颜色')" class="form_item_margin">
            <span class="l_color_box r_margin_right8">
              <l-input-color
                v-model="myConfig.yNameLineColor"
                :notInput="true"
              ></l-input-color>
            </span>
            <el-input
              v-model="myConfig.yNameLineColor"
              class="r_160width"
            ></el-input>
          </el-form-item>
          <el-form-item label="网格线">
            <el-switch
              v-model="myConfig.yAxisSplitLineShow"
              class="float_right"
            ></el-switch>
          </el-form-item>
          <el-form-item label="分割间隔">
            <el-input-number
              v-model="myConfig.yAxisinterval"
              :min="0"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="最大值">
            <el-input-number
              v-model="myConfig.yAxisMax"
              :min="0"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="最小值">
            <el-input-number
              v-model="myConfig.yAxisMin"
              :min="0"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="轴反转">
            <el-switch v-model="myConfig.yAxisInverse" class="float_right">
            </el-switch>
          </el-form-item>
        </el-collapse-item>
      </template>
      <!-- 数值设置 -->
      <template v-if="dicOption.labelList.includes(type)">
        <el-collapse-item title="数值设置">
          <el-form-item label="显示">
            <el-switch v-model="myConfig.labelShow" class="float_right">
            </el-switch>
          </el-form-item>
          <el-form-item :label="$t('颜色')" class="form_item_margin">
            <span class="l_color_box r_margin_right8">
              <l-input-color
                v-model="myConfig.labelShowColor"
                :notInput="true"
              ></l-input-color>
            </span>
            <el-input
              v-model="myConfig.labelShowColor"
              class="r_96width r_margin_right8"
            >
            </el-input>
            <el-input
              v-model="myConfig.labelShowFontSize"
              class="r_56width"
              oninput="value=value.replace(/[^\d]/g,'')"
            >
              <span slot="suffix" style="line-height: 32px">px</span>
            </el-input>
          </el-form-item>
          <el-form-item label="字体粗细">
            <l-select
              v-model="myConfig.labelShowFontWeight"
              :options="dicOption.fontWeightOptions"
              :clearable="false"
            >
            </l-select>
          </el-form-item>
          <el-form-item :label="$t('文本位置')">
            <l-select
              v-if="type!=='pie'"
              :clearable="false"
              :options="dicOption.labelPositionOptions2"
              v-model="myConfig.labelPosition"
            />
            <l-select
              v-else
              :clearable="false"
              :options="dicOption.labelPositionOptions"
              v-model="myConfig.labelPosition"
            />
          </el-form-item>
          <el-form-item :label="$t('格式方式')">
            <l-select
              :clearable="false"
              :options="dicOption.labelFormatterTypeOptions"
              v-model="myConfig.labelFormatterType"
            />
          </el-form-item>
          <el-form-item
            v-if="myConfig.labelFormatterType == 'fn'"
            :label="$t('格式脚本')"
          >
            <el-button type="primary" size="mini">{{ $t("设置") }}</el-button
            ><!-- @click="handleAddCode('labelFormatter')" -->
          </el-form-item>
          <el-form-item v-else :label="$t('格式文本')">
            <el-input class="l-input-icon" v-model="myConfig.labelFormatter">
              <template slot="append">
                <el-popover
                  placement="top-start"
                  :title="$t('参数说明')"
                  width="400"
                  trigger="hover"
                >
                  <p>
                    <span style="color: #ff0033">{a}</span>：{{
                      $t("系列名")
                    }}。
                  </p>
                  <p>
                    <span style="color: #ff0033">{b}</span>：{{
                      $t("数据名")
                    }}。
                  </p>
                  <p>
                    <span style="color: #ff0033">{c}</span>：{{
                      $t("数据值")
                    }}。
                  </p>
                  <p>
                    <span style="color: #ff0033">{d}</span>：{{
                      $t("百分比")
                    }}。
                  </p>
                  <p>
                    <span style="color: #ff0033">{e}</span>：{{ $t("换行") }}。
                  </p>
                  <p>
                    <span style="color: #ff0033">{@xxx}</span>：{{
                      $t("数据中名为")
                    }}
                    <span style="color: #ff0033">'xxx'</span>
                    {{ $t("的维度的值，如") }}
                    <span style="color: #ff0033">{@product}</span>
                    {{ $t("表示名为")
                    }}<span style="color: #ff0033">'product'</span>
                    {{ $t("的维度的值") }}。
                  </p>
                  <p>
                    <span style="color: #ff0033">{@[n]}</span>：{{
                      $t("数据中维度")
                    }}
                    <span style="color: #ff0033">n</span> {{ $t("的值，如") }}
                    <span style="color: #ff0033">{@[3]}</span
                    >{{ $t("表示维度 3 的值，从") }} {{ $t("0 开始计数") }}。
                  </p>
                  <el-button
                    slot="reference"
                    icon="learun-icon-circle-question"
                  />
                </el-popover>
              </template>
            </el-input>
          </el-form-item>
        </el-collapse-item>
      </template>
      <!-- 提示语设置  -->
      <template v-if="dicOption.tipList.includes(type)">
        <el-collapse-item title="提示语设置">
          <el-form-item :label="$t('文本')" class="form_item_margin">
            <span class="l_color_box r_margin_right8">
              <l-input-color
                v-model="myConfig.tipColor"
                :notInput="true"
              ></l-input-color>
            </span>
            <el-input
              v-model="myConfig.tipColor"
              class="r_96width r_margin_right8"
            >
            </el-input>
            <el-input
              v-model="myConfig.tipFontSize"
              class="r_56width"
              oninput="value=value.replace(/[^\d]/g,'')"
            >
              <span slot="suffix" style="line-height: 32px">px</span>
            </el-input>
          </el-form-item>
        </el-collapse-item>
      </template>
      <!-- 轴距离设置 -->
      <template v-if="dicOption.postionList.includes(type)">
        <el-collapse-item title="坐标轴设置">
          <el-form-item label="显示">
            <el-switch v-model="myConfig.gridShow" class="float_right">
            </el-switch>
          </el-form-item>
          <el-form-item :label="$t('边距 (px)')" class="l_number_set">
            <span class="r_50width l_input_span3">
              <el-input-number
                v-model="myConfig.gridY"
                controls-position="right"
                class="r_50width l_input_number"
              >
              </el-input-number>
              <span class="l_input_num3" style="line-height: 32px">上</span>
            </span>
            <span class="r_50width l_input_span3">
              <el-input-number
                v-model="myConfig.gridY2"
                controls-position="right"
                class="r_50width l_input_number"
              >
              </el-input-number>
              <span class="l_input_num3" style="line-height: 32px">下</span>
            </span>
            <span class="r_50width l_input_span3">
              <el-input-number
                v-model="myConfig.gridX"
                controls-position="right"
                class="r_50width l_input_number"
              >
              </el-input-number>
              <span class="l_input_num3" style="line-height: 32px">左</span>
            </span>
            <span class="r_50width l_input_span3">
              <el-input-number
                v-model="myConfig.gridX2"
                controls-position="right"
                class="r_50width l_input_number"
              >
              </el-input-number>
              <span class="l_input_num3" style="line-height: 32px">右</span>
            </span>
          </el-form-item>
        </el-collapse-item>
      </template>
      <!-- 图例设置 -->
      <template v-if="dicOption.legendList.includes(type)">
        <el-collapse-item title="图例操作">
          <el-form-item label="图例">
            <el-switch
              v-model="myConfig.legend"
              class="float_right"
            ></el-switch>
          </el-form-item>
          <el-form-item label="所在位置">
            <l-select
              v-model="myConfig.legendPostion"
              :options="dicOption.legendPositionOptions"
              :clearable="false"
            >
            </l-select>
          </el-form-item>
          <el-form-item :label="$t('边距大小')">
            <el-input-number
              :min="0"
              controls-position="right"
              v-model="myConfig.legendPadding"
            />
          </el-form-item>
          <el-form-item label="布局朝向">
            <l-select
              v-model="myConfig.legendOrient"
              :options="dicOption.orientListOptions"
              :clearable="false"
            >
            </l-select>
          </el-form-item>
          <el-form-item :label="$t('文本')" class="form_item_margin">
            <span class="l_color_box r_margin_right8">
              <l-input-color
                v-model="myConfig.legendColor"
                :notInput="true"
              ></l-input-color>
            </span>
            <el-input
              v-model="myConfig.legendColor"
              class="r_96width r_margin_right8"
            >
            </el-input>
            <el-input
              v-model="myConfig.legendFontSize"
              class="r_56width"
              oninput="value=value.replace(/[^\d]/g,'')"
            >
              <span slot="suffix" style="line-height: 32px">px</span>
            </el-input>
          </el-form-item>
          <el-form-item label="宽度自动">
            <el-switch
              v-model="myConfig.legendWidthAuto"
              class="float_right"
            ></el-switch>
          </el-form-item>
          <el-form-item v-if="!myConfig.legendWidthAuto" :label="$t('宽度')">
            <el-input-number
              v-model="myConfig.legendWidth"
              :min="0"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item :label="$t('标记宽度')">
            <el-input-number
              v-model="myConfig.legendItemWidth"
              :min="0"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item :label="$t('标记高度')">
            <el-input-number
              v-model="myConfig.legendItemHeight"
              :min="0"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item :label="$t('标记形状')">
            <l-select
              v-model="myConfig.legendItemIcon"
              :options="dicOption.iconOptions"
              :clearable="false"
            />
          </el-form-item>
        </el-collapse-item>
      </template>
      <!-- 颜色设置 -->
      <template v-if="dicOption.colorList.includes(type)">
        <el-collapse-item title="自定义配色">
          <!-- <el-form-item label="文字颜色">
            <l-input-color v-model="myConfig.nameColor"> </l-input-color>
          </el-form-item>
          <el-form-item label="轴线颜色">
            <l-input-color v-model="myConfig.lineColor"></l-input-color>
          </el-form-item> -->
          <div class="l-block" style="padding: 0; margin-bottom: 16px">
            <l-edit-table
              :dataSource="myConfig.barColor"
              :isShowNum="false"
              @addRow="handleAdd"
              @deleteRow="rowDel"
            >
              <el-table-column prop="color1" label="颜色" width="64">
                <template slot-scope="scope">
                  <el-color-picker
                    size="mini"
                    v-model="scope.row.color1"
                  ></el-color-picker>
                </template>
              </el-table-column>
              <el-table-column prop="color2" label="渐变色" width="64">
                <template slot-scope="scope">
                  <el-color-picker
                    size="mini"
                    v-model="scope.row.color2"
                  ></el-color-picker>
                </template>
              </el-table-column>
              <el-table-column prop="postion" label="位置" width="100">
                <template slot-scope="scope">
                  <el-input-number
                    size="mini"
                    v-model="scope.row.postion"
                    controls-position="right"
                  >
                  </el-input-number>
                </template>
              </el-table-column>
            </l-edit-table>
          </div>
        </el-collapse-item>
      </template>
      <!-- 动画设置 -->
      <template v-if="dicOption.animationList.includes(type)">
        <el-collapse-item title="动画设置">
          <el-form-item label="缩放" class="form_item_margin">
            <el-slider
              v-model="myConfig.scale"
              :min="1"
              :max="10"
              class="slider_thin"
            ></el-slider>
          </el-form-item>
          <el-form-item label="X旋转度" class="form_item_margin">
            <el-slider
              v-model="myConfig.rotateX"
              :min="min"
              :max="max"
              class="slider_thin"
            ></el-slider>
          </el-form-item>
          <el-form-item label="Y旋转度" class="form_item_margin">
            <el-slider
              v-model="myConfig.rotateY"
              :min="min"
              :max="max"
              class="slider_thin"
            ></el-slider>
          </el-form-item>
          <el-form-item label="Z旋转度" class="form_item_margin">
            <el-slider
              v-model="myConfig.rotateZ"
              :min="min"
              :max="max"
              class="slider_thin"
            ></el-slider>
          </el-form-item>
          <el-form-item label="进入动画">
            <l-select
              :options="animateOptions"
              v-model="myConfig.animateValue"
              @change="handleChangeAnimate"
            >
            </l-select>
          </el-form-item>
        </el-collapse-item>
      </template>
    </el-collapse>
  </div>
</template>

<script>
import { dicOption } from "../../mixins/config";
export default {
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
    type: String,
  },
  data() {
    return {
      dicOption: dicOption,
      code: {
        box: false,
        content: "",
        type: "echartFormatter",
      },
      min: -360,
      max: 360,
      animateOptions: [
        { label: "弹跳", value: "bounce" },
        { label: "放大缩小弹簧", value: "bounceIn" },
        { label: "向下长距进入", value: "fadeInDownBig" },
        { label: "向右长距进入", value: "fadeInLeftBig" },
        { label: "向左长距进入", value: "fadeInRightBig" },
        { label: "向上长距进入", value: "fadeInUpBig" },
        { label: "Y轴旋转", value: "flip" },
        { label: "中心X轴旋转", value: "flipInX" },
        { label: "中心Y轴旋转", value: "flipInY" },
      ],
    };
  },
  computed: {
    myConfig() {
      return this.config;
    },
  },
  methods: {
    handleAdd() {
      this.myConfig.barColor.push({
        color1: "",
        color2: "",
        postion: 50,
      });
    },
    rowDel({ index }) {
      this.myConfig.barColor.splice(index, 1);
    },
    handleClickPostion(key, position) {
      this.$set(this.myConfig, key, position);
    },
    handleChangeAnimate(val) {
      if (val) {
        this.$set(this.myConfig, "animateValue", val.value);
      } else {
        this.$set(this.myConfig, "animateValue", "");
      }
    },
  },
};
</script>

<style>
</style>